<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" th:href="@{/assets/img/logo-fav.png}">
    <title>Beagle</title>
    <!--favicon-->
    <link rel="icon" th:href="@{/assets/images/favicon.ico}" type="image/x-icon">
    <!-- simplebar CSS-->
    <link th:href="@{/assets/plugins/simplebar/css/simplebar.css}" rel="stylesheet"/>
    <!-- Bootstrap core CSS-->
    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet"/>
    <!-- animate CSS-->
    <link th:href="@{/assets/css/animate.css}" rel="stylesheet" type="text/css"/>
    <!-- Icons CSS-->
    <link th:href="@{/assets/css/icons.css}" rel="stylesheet" type="text/css"/>
    <!-- Sidebar CSS-->
    <link th:href="@{/assets/css/sidebar-menu.css}" rel="stylesheet"/>
    <!-- Custom Style-->
    <link th:href="@{/assets/css/app-style.css}" rel="stylesheet"/>
</head>
<body>

<!-- Start wrapper-->
<div id="wrapper">

    <!--Start sidebar-wrapper-->
    <div id="sidebar-wrapper" data-simplebar="" data-simplebar-auto-hide="true">
        <div class="brand-logo">
            <a href="index.html">
                <img th:src="@{/assets/images/logo-icon.png}" class="logo-icon" alt="logo icon">
                <h5 class="logo-text">Rukada Admin</h5>
            </a>
        </div>
        <ul class="sidebar-menu do-nicescrol">
            <li class="sidebar-header">主菜单浏览</li>
            <li th:if="${session.resourceList} != null" th:each="resource : ${session.resourceList}" th:class="${session.menuId}? 'active'">
                <a th:href="@{|${resource.resourceUrl}?resourceId=${resource.resourceId}|}"  th:class="waves-effect">
                    <i th:class="|zmdi ${resource.resourceIcon}|"></i>
                    <span th:text="${resource.resourceName}"></span>
                </a>
                <div th:if="${resource.childResource} != null" th:include="public/header/menu::menuUlTag(${resource.childResource})"></div>
            </li>
            <!-- 左侧菜单区域 -->
        </ul>

    </div>
    <!--End sidebar-wrapper-->

    <!--Start topbar header-->
    <header class="topbar-nav">
        <nav class="navbar navbar-expand fixed-top bg-white">
            <ul class="navbar-nav mr-auto align-items-center">
                <li class="nav-item">
                    <a class="nav-link toggle-menu" href="javascript:void(0);">
                        <i class="icon-menu menu-icon"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <form class="search-bar">
                        <input type="text" class="form-control" placeholder="Enter keywords">
                        <a href="javascript:void(0);"><i class="icon-magnifier"></i></a>
                    </form>
                </li>
            </ul>

            <ul class="navbar-nav align-items-center right-nav-link">
                <li class="nav-item dropdown-lg">
                    <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void(0);">
                        <i class="fa fa-envelope-open-o"></i><span class="badge badge-secondary badge-up">12</span></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                You have 12 new messages
                                <span class="badge badge-secondary">12</span>
                            </li>
                            <li class="list-group-item">
                                <a href="javaScript:void(0);">
                                    <div class="media">
                                        <div class="avatar"><img class="align-self-start mr-3" th:src="@{/assets/images/avatars/avatar-5.png}" alt="user avatar"></div>
                                        <div class="media-body">
                                            <h6 class="mt-0 msg-title">Jhon Deo</h6>
                                            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
                                            <small>Today, 4:10 PM</small>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="list-group-item">
                                <a href="javaScript:void(0);">
                                    <div class="media">
                                        <div class="avatar"><img class="align-self-start mr-3" th:src="@{/assets/images/avatars/avatar-6.png}" alt="user avatar"></div>
                                        <div class="media-body">
                                            <h6 class="mt-0 msg-title">Sara Jen</h6>
                                            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
                                            <small>Yesterday, 8:30 AM</small>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="list-group-item">
                                <a href="javaScript:void(0);">
                                    <div class="media">
                                        <div class="avatar"><img class="align-self-start mr-3" th:src="@{/assets/images/avatars/avatar-7.png}" alt="user avatar"></div>
                                        <div class="media-body">
                                            <h6 class="mt-0 msg-title">Dannish Josh</h6>
                                            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
                                            <small>5/11/2018, 2:50 PM</small>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="list-group-item">
                                <a href="javaScript:void(0);">
                                    <div class="media">
                                        <div class="avatar"><img class="align-self-start mr-3" th:src="@{/assets/images/avatars/avatar-8.png}" alt="user avatar"></div>
                                        <div class="media-body">
                                            <h6 class="mt-0 msg-title">Katrina Mccoy</h6>
                                            <p class="msg-info">Lorem ipsum dolor sit amet.</p>
                                            <small>1/11/2018, 2:50 PM</small>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="list-group-item"><a href="javaScript:void(0);">See All Messages</a></li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item dropdown-lg">
                    <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
                        <i class="fa fa-bell-o"></i><span class="badge badge-info badge-up">14</span></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                You have 14 Notifications
                                <span class="badge badge-info">14</span>
                            </li>
                            <li class="list-group-item">
                                <a href="javaScript:void(0);">
                                    <div class="media">
                                        <i class="zmdi zmdi-accounts fa-2x mr-3 text-primary"></i>
                                        <div class="media-body">
                                            <h6 class="mt-0 msg-title">New Registered Users</h6>
                                            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="list-group-item">
                                <a href="javaScript:void(0);">
                                    <div class="media">
                                        <i class="zmdi zmdi-coffee fa-2x mr-3 text-success"></i>
                                        <div class="media-body">
                                            <h6 class="mt-0 msg-title">New Received Orders</h6>
                                            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="list-group-item">
                                <a href="javaScript:void(0);">
                                    <div class="media">
                                        <i class="zmdi zmdi-notifications-active fa-2x mr-3 text-secondary"></i>
                                        <div class="media-body">
                                            <h6 class="mt-0 msg-title">New Updates</h6>
                                            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="list-group-item"><a href="javaScript:void(0);">See All Notifications</a></li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item language">
                    <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="#"><i class="flag-icon flag-icon-gb"></i></a>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li class="dropdown-item"> <i class="flag-icon flag-icon-gb mr-2"></i> English</li>
                        <li class="dropdown-item"> <i class="flag-icon flag-icon-fr mr-2"></i> French</li>
                        <li class="dropdown-item"> <i class="flag-icon flag-icon-cn mr-2"></i> Chinese</li>
                        <li class="dropdown-item"> <i class="flag-icon flag-icon-de mr-2"></i> German</li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown" href="#">
                        <span class="user-profile"><img th:src="@{/assets/images/avatars/avatar-13.png}" class="img-circle" alt="user avatar"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li class="dropdown-item user-details">
                            <a href="javaScript:void();">
                                <div class="media">
                                    <div class="avatar"><img class="align-self-start mr-3" th:src="@{/assets/images/avatars/avatar-13.png}" alt="user avatar"></div>
                                    <div class="media-body">
                                        <h6 class="mt-2 user-title">Katrina Mccoy</h6>
                                        <p class="user-subtitle">mccoy@example.com</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li class="dropdown-item"><i class="icon-envelope mr-2"></i> 详情</li>
                        <li class="dropdown-divider"></li>
                        <li class="dropdown-item"><i class="icon-wallet mr-2"></i> 账号</li>
                        <li class="dropdown-divider"></li>
                        <li class="dropdown-item"><i class="icon-settings mr-2"></i> 设置</li>
                        <li class="dropdown-divider"></li>
                        <li class="dropdown-item"><i class="icon-power mr-2"></i> 退出</li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <!--End topbar header-->

    <div class="clearfix"></div>

    <div class="content-wrapper">
        <div class="container-fluid">
            <div class="page-head" th:include="::pageHeder">
            </div>
            <div class="main-content container-fluid" th:include="::content">
            </div>

            <!--End Dashboard Content-->

        </div>
        <!-- End container-fluid-->

    </div><!--End content-wrapper-->
    <!--Start Back To Top Button-->
    <a href="javaScript:void(0);" class="back-to-top"><i class="fa fa-angle-double-up"></i> </a>
    <!--End Back To Top Button-->

    <!--Start footer-->
    <footer class="footer">
        <div class="container">
            <div class="text-center">
                Copyright © 2018 <a href="http://www.17sucai.com/">Rukada</a> Admin
            </div>
        </div>
    </footer>
    <!--End footer-->

</div><!--End wrapper-->

<!-- Bootstrap core JavaScript-->
<script th:src="@{/assets/js/jquery.min.js}"></script>
<script th:src="@{/assets/js/popper.min.js}"></script>
<script th:src="@{/assets/js/bootstrap.min.js}"></script>

<!-- simplebar js -->
<script th:src="@{/assets/plugins/simplebar/js/simplebar.js}"></script>
<!-- waves effect js -->
<script th:src="@{/assets/js/waves.js}"></script>
<!-- sidebar-menu js -->
<script th:src="@{/assets/js/sidebar-menu.js}"></script>
<!-- Custom scripts -->
<script th:src="@{/assets/js/app-script.js}"></script>
<!-- Chart js -->
<!--<script th:src="@{/assets/plugins/Chart.js/Chart.min.js}"></script>-->
<!--Peity Chart -->
<!--<script th:src="@{/assets/plugins/peity/jquery.peity.min.js}"></script>-->
<!-- Index js -->
<script th:src="@{/assets/js/index.js}"></script>
</body>
</html>
